<script setup lang='ts'>
import { getBirdsListService } from '@/api/birds'

interface Bird {
    id: number;
    createdAt: string;
    updatedAt: string;
    morphologyAndFeatures: string;
    name: string;
    habits: string;
    species: string;
    imageUrl: string;
    soundUrl: string;
    description: string;
    growthAndDistribution: string;
}

//定义一个对象来存储鸟类列表数据
const birdsList = ref<Bird[]>([]);

//调用后端接口获取鸟类列表
const getBirdsList = async () => {

    let result = await getBirdsListService();

    //TODO 感觉之前好多地方都忘记加判断是否成功了，记得检查一下，失败要有提示
    //如果成功则将数据赋值给birdsList，失败则弹出提示
    if (result.code == 200) {
        birdsList.value = result.data;
    } else {
        ElMessage.error(result.msg ? result.msg : '获取鸟类列表失败');
    }

};
getBirdsList();

// 计算要渲染到轮播项的鸟类列表
// const carouselItems = ref<Bird[]>([]);
// if (birdsList.value.length <= 5) {
//     carouselItems.value = birdsList.value;
// } else {
//     carouselItems.value = birdsList.value.slice(-5);
// }

</script>

<template>
    <div class="block text-center">
        <!-- <span class="demonstration">Motion blur the switch (default)</span> -->
        <el-carousel height="300px">
            <el-carousel-item v-for="item in 2" :key="item">
                <h3 class="small justify-center simple-text">
                    这是一个基于鸟鸣声的鸟类识别和鸟类百科大全网站
                </h3>
            </el-carousel-item>
        </el-carousel>
    </div>
    <div class="text-center">
        <h3>中国鸟类大全</h3>
    </div>
    <el-carousel :interval="4000" type="card" height="300px">
        <el-carousel-item v-for="item in birdsList.slice(-5)" :key="item['id']">
            <!-- <h3 text="2xl" justify="center">{{ item }}</h3> -->
            <img :src="item['imageUrl']" alt="图片" style="width: 100%; height: 100%; object-fit: cover;">
        </el-carousel-item>
    </el-carousel>
    <!-- 使用图片压缩加快首屏加载 -->
    <!-- <el-carousel :interval="4000" type="card" height="300px">
        <el-carousel-item v-for="item in birdsList.slice(-5)" :key="item['id']">
            <picture style="width: 100%; height: 100%; display: block;"> -->
                <!-- 优先加载 AVIF -->
    <!-- <source :srcset="`${item.imageUrl}?x-oss-process=image/format,avif/quality,q_75`" type="image/avif" /> -->
    <!-- 如果 AVIF 不支持则加载 WebP -->
    <!-- <source :srcset="`${item.imageUrl}?x-oss-process=image/format,webp/quality,q_75`" type="image/webp" /> -->
    <!-- 最后 fallback 到原始格式 -->
    <!-- <img :src="item.imageUrl" alt="鸟类图片" style="width: 100%; height: 100%; object-fit: cover;" />
    </picture>
    </el-carousel-item>
    </el-carousel> --> 
    <p> </p>
    <!-- <el-backtop :visibility-height="100" :right="100" :bottom="100" /> -->
</template>

<style scoped>
.demonstration {
    color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

.text-center {
    text-align: center;
}
</style>